import { defineConfig } from 'unocss';

// noinspection RegExpDuplicateCharacterInClass
export default defineConfig({
  content: {
    pipeline: {
      include: [
        // the default
        /\.(vue|svelte|[jt]sx|mdx?|astro|elm|php|phtml|html)($|\?)/,
        // include js/ts/vue files
        'components/**/*.{js,ts,vue}'
      ]
    }
  },
  theme: {
    colors: {}
  },
  shortcuts: {
    'wh-full': 'w-full h-full'
  },
  rules: [
    [
      /^b([t|r|b|l]*)-(.*)/,
      ([_className, match, rule]) => {
        const attrs = rule.split('-');
        // 属性中不包含 border-style 则默认 solid
        if (!/(none|hidden|dotted|dashed|solid|double|groove|ridge|inset|outset)/.test(rule)) {
          attrs.push('solid');
        }
        // 属性中不包含 border-width 则默认 1px
        // noinspection RegExpDuplicateCharacterInClass
        if (!/\d[px|%|em|rem|vh|vw|vmin|vmax]/.test(rule)) {
          attrs.push('1px');
        }
        const styles = {};
        if (match) {
          if (/t/.test(match)) {
            styles['border-top'] = attrs.join(' ');
          }
          if (/r/.test(match)) {
            styles['border-right'] = attrs.join(' ');
          }
          if (/b/.test(match)) {
            styles['border-bottom'] = attrs.join(' ');
          }
          if (/l/.test(match)) {
            styles['border-left'] = attrs.join(' ');
          }
        } else {
          styles['border'] = attrs.join(' ');
        }
        // console.log('border >>> \t_className=', _className, '\tmatch=', match, '\trule=', rule, '\tattrs=', attrs, '\tstyles=', styles);
        return styles;
      },
    ],
    [
      /^p-(([\d.]+[px|%|em|rem|vh|vw]*)(-([\d.]+[px|%|em|rem|vh|vw]*))?(-([\d.]+[px|%|em|rem|vh|vw]*))?(-([\d.]+[px|%|em|rem|vh|vw]*))?)/,
      ([_className, , value1, , value2, , value3, , value4]) => {
        const values = [value1, value2, value3, value4];
        // console.log('padding >>> \t_className=',_className,'\tvalue1=',value1, '\tvalue2=',value2, '\tvalue3=',value3, '\tvalue4=',value4,);
        return {
          padding: values.join(' '),
        };
      },
    ],
    [
      /^m-(([\d.]+[px|%|em|rem|vh|vw]*)(-([\d.]+[px|%|em|rem|vh|vw]*))?(-([\d.]+[px|%|em|rem|vh|vw]*))?(-([\d.]+[px|%|em|rem|vh|vw]*))?)/,
      ([_className, , value1, , value2, , value3, , value4]) => {
        const values = [value1, value2, value3, value4];
        return {
          margin: values.join(' '),
        };
      },
    ]
  ]
});
